<head>
    <title>Time Zone</title>
    <meta charset="utf-8">
    <link href="../base1/cockpit.css" type="text/css" rel="stylesheet">
    <script src="../base1/cockpit.js"></script>
</head>
<body>
    <div class="container-fluid" style='max-width: 400px'>
        <table class="form-table-ct">
            <tr>
                <td><label class="control-label">Time Zone</label></td>
                <td><span id="current"></span></td>
            </tr>
            <tr>
                <td><label class="control-label" for="new">New Zone</label></td>
                <td><input class="form-control" id="new" value="UTC"></td>
            </tr>
            <tr>
                <td><button class="btn btn-default btn-primary" id="change">Change</button></td>
		<td><span id="failure"></span></td>
            </tr>
        </table>
    </div>

    <script>
        var input = document.getElementById("new");
        var current = document.getElementById("current");
        var failure = document.getElementById("failure");

        document.getElementById("change").addEventListener("click", change_zone);

        var service = cockpit.dbus('org.freedesktop.timedate1');
        var timedate = service.proxy();
        timedate.addEventListener("changed", display_zone);

        function display_zone() {
            current.innerHTML = timedate.Timezone;
        }

        function change_zone() {
            var call = timedate.SetTimezone(input.value, true);
            call.fail(change_fail);
            failure.innerHTML = "";
        }

        function change_fail(err) {
            failure.innerHTML = err.message;
        }

    </script>
</body>
</html>

